<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>实时资金流向</title>
		<link href="css/text.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			p {margin:0px;}
			#box{
				display:inline-block;
				margin:0px 5px 0px 5px;
				border-box:50%;
				width:10px;
				height:10px;
			}
			.fixedBox{
				border: 1px solid #555555;				
				
			}
			.fixedBox::-webkit-scrollbar {
				width: 10px;     
				height: 10px;				
			}								
		</style>		
		<script type="text/javascript" src="js/json2html.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="DatePicker/WdatePicker.js"> </script>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>
	<body>
		<div id="towrite" class="fixedBox">
			<div id="title" style="height:20px;"></div>
			<div id="towrite1" class="fixedBox" style="position:relative; float:left;margin-top:-18px;"></div>
			<div id="chart" style="position:relative; float:left;margin-top:5px;"></div>				
		</div>
				
		<script>
			
			window.onload = function() {
				changeStyle();	
				getSource();					
			}		

			function replaceDoc() {
				var url = encodeURI("http://www.treeid/dlglocalurl##homepath##company/东财实时资金流向.html##xxxxxx####STOCKNAME##");
				window.location.replace(url)				
			}
			
			$(function() {
				setInterval(function() {
					if(isMinStatus()==false && ds == 1){	
						replaceDoc();										
					}					
				},
				500);
			})
			
			$(function() {
				setInterval(function() {
					time_range("9:00","15:15")						
				},
				60000);
			})
			
			//最小化
			function isMinStatus() {
			  var isMin = false;
			  if (window.outerWidth != undefined) {
				 isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
			  } else {
				 isMin = window.screenTop < -30000 && window.screenLeft < -30000;
			  }
			 
				 return isMin;
			}
			
			function time_range(beginTime, endTime) {
				var strb = beginTime.split(":");
				if (strb.length != 2) {
					return false;
				}

				var stre = endTime.split(":");
				if (stre.length != 2) {
					return false;
				}

				var b = new Date();
				var e = new Date();
				var n = new Date();

				b.setHours(strb[0]);
				b.setMinutes(strb[1]);
				e.setHours(stre[0]);
				e.setMinutes(stre[1]);

				if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
					v = 1;
					getSource();					
					console.log(true)　　　　　　
					return true;				
				} else {
					console.log(false)
				    return false;     
				}
			}　　　
   　　　
			function changeStyle() {
				var div = document.getElementById("towrite");	
				//div.style.border= "3px solid #555555";
				div.style.left= "0px"; 				
				div.style.width= "98%";	
				div.style.height= "98%";		
				div.style.fontSize="12px";	
				
				var div1 = document.getElementById("chart");	
				div1.style.border= "1px solid #696969";				
				div1.style.left= "0px"; 
				div1.style.width= "98%";
				div1.style.height= "75%";	
				
				var div2 = document.getElementById("towrite1");					
				div2.style.border= "1px solid #696969";	
				div2.style.left= "0px";								
				div2.style.width= "320px";	
				div2.style.height= "80px";						
			}
			
			Date.prototype.Format = function (fmt) {
				var o = {
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"h+": this.getHours(), //小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			};
			
			function keepTwoDecimal(num) {  
               var result = parseFloat(num);  
               if (isNaN(result)) {                     
                   return false;  
               }  
               result = Math.round(num * 100) / 100;  
               return result;  
			}	
			
			function NumberTransform(num) { 
				var result = num;
				if(Math.abs(num) > 100000000){
					result = num / 100000000;
					result = result.toFixed(2) + "亿";
				}else if(Math.abs(num) > 10000){
					result = num/10000;
					result = result.toFixed(2) + "万";
				}				   
				return result;  
			};	
			
			var z = 0;  //刷新
			var v = 0;	//刷新		
			var gpdm = "";
			var gpmc = "";	
			var ds = 0;	
			function getSource() {			
				if(v == 0){
					var u = decodeURI(window.location.href);								
					if(u.indexOf("##") > -1){
						var gp = u.split('##');				
						dm = gp[1];
						gpmc = gp[2];	
						dm == gpdm ? ds = 0: ds = 1;	
					}else{
						dm = "600000";
						gpmc = "浦发银行";					
					}
				}
				
				if(dm != gpdm || v == 1){
					v = 0;					
					gpdm = dm;					
					var dms = "";
					var dmt = "";
					if(dm.substr(0,1)=="6"){
						dms = "SH" + dm;
						dmt = "1." + dm;
					}else{
						dms = "SZ" + dm;
						dmt = "0." + dm;
					}
					
					var div = document.getElementById('title');						
					//div.innerHTML = '<font size="3" style="color:#00FFFF;">实时资金流向</font>';							
					var url = "https://push2.eastmoney.com/api/qt/stock/fflow/kline/get?cb=jQuery1123016706401424591832_1668777335401&lmt=0&klt=1&fields1=f1,f2,f3,f7&fields2=f51,f52,f53,f54,f55,f56,f57,f58,f59,f60,f61,f62,f63,f64,f65&ut=b2884a393a59ad64002292a3e90d46a5&secid=" + dmt; 
					var zjwz = '<a href="https://data.eastmoney.com/zjlx/' + gpdm + '.html" target="_blank" style="position:absolute; left:300px;font-size:12px;">网址</a>';					
					div.innerHTML = '<font size="3">' + gpdm + "&nbsp;&nbsp;&nbsp;" + gpmc + zjwz + "</font>";
					
					
					if (window.XMLHttpRequest) {
						xmlHttp = new XMLHttpRequest();				
					} else {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");				
					}				
					xmlHttp.onreadystatechange = writeSource;
					xmlHttp.open("GET", url, true);
					xmlHttp.send(null);	
					
					var url32 = "http://push2.eastmoney.com/api/qt/ulist.np/get?cb=jQuery1123022062381139471432_1633842668576&fltt=2&secids=" + dmt +"&fields=f62,f184,f66,f69,f72,f75,f78,f81,f84,f87,f164,f165,f166,f167,f168,f169,f170,f171,f172,f173";
					
					if (window.XMLHttpRequest) {
						xmlHttp32 = new XMLHttpRequest();
					} else {					
						xmlHttp32 = new ActiveXObject("Microsoft.XMLHTTP");
					}
					xmlHttp32.onreadystatechange = writeSource;
					xmlHttp32.open("GET", url32, true);
					xmlHttp32.send(null);	
				}				
			}
			
			var rq = "";
			function writeSource() { 						
				if (xmlHttp.readyState == 4 && xmlHttp32.readyState == 4){				
				
					var data = xmlHttp.responseText
					//document.write(data);
					data = data.replace(/ /g,",");
					rq = data.match(/"b":(\S*)/)[1].split(",")[0];
					rq = rq.substr(0,4) + "-" + rq.substr(4,2) + "-" + rq.substr(6,2);
					data = data.match(/"klines":(\S*)\]}}/)[1] + ",";
					//document.write(data);
					
					data = data.replace(/(").*?(?=",)/g,
					function(word){ 
						str = word.replace(',"',''); 
						//alert(str)
						return '{"rq":' + str.split(',')[0] + 
						'","time":"' + str.split(',')[1] + 
						'","zljlr":' + str.split(',')[2] + 
						',"xdjlr":' + str.split(',')[3] +						
						',"zdjlr":' + str.split(',')[4] +
						',"ddjlr":' + str.split(',')[5] +
						',"cddjlr":' + str.split(',')[6] +
						'},';
					});
					data = data.replace('},",','}]');
					//document.write(data);
					
					var arr = JSON.parse(data);
					GetChart(arr);
					
					var data1 = xmlHttp32.responseText	
					//document.write(data1);							
					var zljlr = data1.match(/"f62":(\S*),"f66/)[1];
					var zljb = data1.match(/"f184":(\S*)}]}/)[1];					
					var cddjlr = data1.match(/"f66":(\S*),"f69/)[1];
					var cddjb = data1.match(/"f69":(\S*),"f72/)[1];					
					var ddjlr = data1.match(/"f72":(\S*),"f75/)[1];
					var ddjb = data1.match(/"f75":(\S*),"f78/)[1];					
					var zdjlr = data1.match(/"f78":(\S*),"f81/)[1];
					var zdjb = data1.match(/"f81":(\S*),"f84/)[1];					
					var xdjlr = data1.match(/"f84":(\S*),"f87/)[1];
					var xdjb = data1.match(/"f87":(\S*),"f164/)[1];
					
					//var a1 = '<span style="display:inline-block;margin:0px 5px 0px 80px;border-box:50%;width:10px;height:10px;background-color:#E13EFE"></span>';
					var a1 = '<span id="box" style="background-color:#E13EFE"></span>';
					var a2 = '<span id="box" style="background-color:#CD5C5C"></span>';
					var a3 = '<span id="box" style="background-color:#FF0000"></span>';
					var a4 = '<span id="box" style="background-color:#FFA500"></span>';
					var a5 = '<span id="box" style="background-color:#00BFFF"></span>';
					var html = "</p>" + a1 + "主力净流入：<font>" + NumberTransform(zljlr) + "</font><font style='position:absolute;left:200px;'>主力净比：<font>" + zljb + "%</font></font></p>" +					
					"</p>" + a2 + "超大单净流入：<font>" + NumberTransform(cddjlr) + "</font><font style='position:absolute;left:200px;'>超大单净比：<font>" + cddjb +  "%</font></font></p>" + 
					"</p>" + a3 + "大单净流入：<font>" + NumberTransform(ddjlr) + "</font><font style='position:absolute;left:200px;'>大单净比：<font>" + ddjb +  "%</font></font></p>" + 
					"</p>" + a4 + "中单净流入：<font>" + NumberTransform(zdjlr) + "</font><font style='position:absolute;left:200px;'>中单净比：<font>" + zdjb +  "%</font></font></p>" + 
					"</p>" + a5 + "小单净流入：<font>" + NumberTransform(xdjlr) + "</font><font style='position:absolute;left:200px;'>小单净比：<font>" + xdjb +  "%</font></font></p>";
					
					var div = document.getElementById('towrite1');	
					div.innerHTML = html;
					change();					
				}	
			}
			
			function change() {
				var div = document.getElementById('towrite1');
				var items = div.getElementsByTagName("font"); 
				for ( var i = 0; i < items.length; i++){
					var obj = items[i];
					var num = parseFloat (obj.firstChild.nodeValue);					
					obj.style.color = num > 0 ? "Orange" : (num < 0 ? "Lime" : "#E5E5E5");					
				}							
			};
			
			function getParamValues(name, arr) {
				var ret = []
				//var len = arr.length;				
				for (var i = 0; i < 240; i++) {
					if(arr[i] != undefined){
						ret.push(arr[i][name])
					}else{
						ret.push(null)
					}
				}				
				return ret
			}
		</script>
		<script>
			function GetChart(arr) {
				var myChart = echarts.init(document.getElementById('chart'));
				
				var option = {
					title:{
						left:'left',						
						text: '实时资金流向 （' + rq + "）",
						textStyle:{ //设置主标题风格
							color:'#FFFACD',//设置主标题字体颜色
							fontStyle:'normal',//主标题文字风格
							fontSize: 14
						}
					},
					tooltip: {   //提示框
						trigger: 'axis',						
						axisPointer: {
							type: 'cross',
							
							label: {
								formatter: function (params) {									
									if(params.value != "null"){
										return params.value
									}
								},
								backgroundColor: '#000'
							},
							crossStyle: {								
								textStyle:{ 
									color: '#fff'									
								}
							},							 
						},						
						formatter(params) {  //添加文字
							if(params[0].name != "null"){
								var str = params[0].name + '<br />'						  
								params.forEach(item => {																							
									str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + item.color + '"></span>' + item.seriesName + " : " + NumberTransform(item.data) + "<br />";
								})
								return str;
							}
						}
					},	
					
					grid: { // 边距
					  left: '10%',
					  right: '5%',
					  bottom: '15%',
					  top: '10%',
					  //containLabel: true  //grid 区域是否包含坐标轴的刻度标签
					},
	
					xAxis: [		//x轴设置		  
						{
							type: 'category',								
							data: getParamValues('time', arr),							
							axisLine:{  //x轴坐标线设置
								lineStyle:{
									color:"#D3D3D3",  //x轴坐标线颜色
									width: 2   // 坐标轴线宽
								}
							},
							axisTick: {   //x轴刻度
								show:false, 
							},
							axisLabel:{	 //x轴标签设置	
								interval: 0,
								formatter: function (value, index) {									
									 if(value=="09:31" || value=="10:30" || value=="11:30" || value=="14:00" || value=="15:00"){
										return value
									 }
								 },
								textStyle:{  //x轴文字
									color:"#FFF"
								}
							},
							axisPointer: {
								type: 'shadow',								
							}
						}
					],

					yAxis: [  //y轴
						{
							type: 'value',
							min: function(value) {//取最小值向下取整为最小刻度									
								return Math.floor(value.min)
							},
							max: function(value) {//取最大值向上取整为最大刻度
								if(value.max < 0){
									return  0 
								}else{
									return  Math.ceil(value.max) 
								}									
							},
							interval: function (value) { // 刻度间隔
								if(value.max < 0){
									return  Math.ceil(value.min) 
								}else{
									return  Math.ceil(value.max)
								}									
							},								
							splitLine:{ //y轴网格线									
								show:true,
								lineStyle: { 									
									color: '#D3D3D3', 
									width: 1,    
									type: 'dotted', //（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisLine: { //y轴坐标线设置
								show: true, 									
								lineStyle: { 									
									color: '#D3D3D3', //y轴颜色
									width: 2,    // 坐标轴线宽
									type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
								} 
							},
							axisTick: {   //y轴刻度
								show:false, 
							},
							axisLabel: {  //y轴标签设置
								show: true,
								color: '#fff',									
								formatter: function (value){
									if(value != 0){							  
										return NumberTransform(value)
									}else{
										return 0
									}
								}
							}
						},
					],					
					series: [						
						{							
							name: '主力净流入',
							data: getParamValues('zljlr', arr),							
							type: 'line',								
							symbol: 'circle',//拐点样式‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’ 
							symbolSize: 0,//拐点大小							
							itemStyle: {
							  normal: {
								lineStyle: {
								  width: 2,//折线宽度
								  color: "#E13EFE"//折线颜色
								},
								color: '#E13EFE',//拐点颜色
								borderColor: '#fff',//拐点边框颜色
								//borderWidth: 1,//拐点边框大小
							  },
							  emphasis: {  //hover设置，不设置可跟随前面定义
								//color: '#E13EFE',//hover拐点颜色定义								
								//borderColor: '#fff',//hover拐点边框颜色
								//borderWidth: 1,//hover拐点边框大小
							  }
							},
						},
						{
							name: '超大单净流入',
							data: getParamValues('cddjlr', arr),
							type: 'line',								
							symbolSize: 0,
							itemStyle: {
							  normal: {
								lineStyle: {
								  width: 2,
								  color: "#CD5C5C"
								},
								color: "#CD5C5C",
							  },
							  emphasis: {
								color: '#CD5C5C'
							  }
							},
						},
						{
							name: '大单净流入',
							data: getParamValues('ddjlr', arr),
							type: 'line',								
							symbolSize: 0,
							itemStyle: {
							  normal: {
								lineStyle: {
								  width: 2,
								  color: "#FF0000"
								},
								color: "#FF0000",
							  },
							  emphasis: {
								color: '#FF0000'
							  }
							},
						},
						{
							name: '中单净流入',
							data: getParamValues('zdjlr', arr),
							type: 'line',								
							symbolSize: 0,
							itemStyle: {
							  normal: {
								lineStyle: {
								  width: 2,
								  color: "#FFA500"
								},
								color: "#FFA500",
							  },
							  emphasis: {
								color: '#FFA500'
							  }
							},
						},
						{
							name: '小单净流入',
							data: getParamValues('xdjlr', arr),
							type: 'line',								
							symbolSize: 1,
							itemStyle: {
							  normal: {
								lineStyle: {
								  width: 2,
								  color: "#00BFFF"
								},
								color: "#00BFFF",
							  },
							  emphasis: {
								color: '#00BFFF'//hover拐点颜色定义
							  }
							},
						}
					]
				}					
				myChart.setOption(option);
			}
		</script>
	</body>
</html>